<template>
  <div class="parent-chat-root">
    <!-- 顶部用户信息栏 -->
    <div class="user-bar">
      <div class="user-avatar-gradient">P</div>
      <div class="user-info">
        <div class="user-name">家长</div>
        <div class="user-desc">欢迎使用家校沟通平台</div>
      </div>
      <button class="logout-btn" @click="$router.push('/')">退出</button>
    </div>
    <!-- 顶部导航栏 -->
    <div class="nav">
      <router-link to="/parent/view-letter" active-class="nav-active">查看信件</router-link>
      <router-link to="/parent/chat" active-class="nav-active">对话沟通</router-link>
      <router-link to="/parent/more-features" active-class="nav-active">更多功能</router-link>
    </div>
    <div class="container">
      <div class="chat-card">
        <div class="sidebar">
          <div class="sidebar-title">联系人
            <button class="add-btn" @click="showAddContact = true">＋</button>
          </div>
          <div class="group-filter">
            <span v-for="g in groups" :key="g" :class="['group-tag', {active: groupFilter===g}]" @click="groupFilter=g">{{ g }}</span>
            <span class="group-tag" :class="{active: groupFilter==='全部'}" @click="groupFilter='全部'">全部</span>
          </div>
          <div class="contacts">
            <div v-for="(contact, idx) in filteredContacts" :key="contact.id" :class="['contact-item', {active: idx===activeContact}]" @click="activeContact=idx">
              <div class="contact-avatar-gradient">{{ contact.avatar }}</div>
              <div class="contact-info">
                <div class="contact-name">{{ contact.name }}</div>
                <div class="contact-subject">{{ contact.subject }}</div>
                <div class="contact-group">分组：{{ contact.group }}</div>
              </div>
              <button class="setting-btn" @click.stop="openSetting(contact)"><i class="fa fa-cog"></i></button>
            </div>
          </div>
        </div>
        <div class="chat-area">
          <div class="chat-header">{{ contacts[activeContact]?.name }}</div>
          <div class="chat-messages" ref="msgBox">
            <div
              v-for="(msg, idx) in contacts[activeContact].messages"
              :key="idx"
              :class="['chat-bubble', msg.from === 'me' ? 'me' : 'ta']"
            >
              {{ msg.text }}
            </div>
          </div>
          <div class="chat-input-area">
            <input v-model="newMsg" @keyup.enter="sendMsg" placeholder="输入消息..." />
            <button @click="sendMsg">发送</button>
          </div>
          <div class="quick-phrases">
            <span v-for="phrase in quickPhrases" :key="phrase" class="phrase-btn" @click="insertPhrase(phrase)">{{ phrase }}</span>
          </div>
        </div>
      </div>
      <!-- 添加联系人弹窗 -->
      <div v-if="showAddContact" class="modal-mask">
        <div class="modal-box">
          <h4>添加联系人</h4>
          <div class="form-group">
            <label>姓名</label>
            <input v-model="addForm.name" placeholder="请输入姓名" />
          </div>
          <div class="form-group">
            <label>分组</label>
            <select v-model="addForm.group">
              <option v-for="g in groups" :key="g" :value="g">{{ g }}</option>
            </select>
          </div>
          <div class="form-group">
            <label>备注</label>
            <input v-model="addForm.subject" placeholder="备注/关系" />
          </div>
          <div style="text-align:right; margin-top:10px;">
            <button @click="showAddContact=false">取消</button>
            <button @click="addContact" style="margin-left:10px;">添加</button>
          </div>
        </div>
      </div>
      <!-- 联系人设置弹窗 -->
      <div v-if="showSetting" class="modal-mask">
        <div class="modal-box">
          <h4>联系人设置</h4>
          <p>这里可以设置联系人（仅界面展示，无实际功能）。</p>
          <div style="text-align:right; margin-top:10px;">
            <button @click="showSetting=false">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
let idSeed = 3;
export default {
  name: 'ParentChat',
  data() {
    return {
      search: '',
      groupFilter: '全部',
      groups: ['老师', '同学', '家长'],
      activeContact: 0,
      newMsg: '',
      showAddContact: false,
      showSetting: false,
      settingContact: null,
      addForm: { name: '', group: '老师', subject: '' },
      contacts: [
        { id: 1, avatar: 'A', name: '班主任', group: '老师', subject: '关于学生表现', messages: [ {from:'me',text:'老师好'}, {from:'ta',text:'你好，有什么问题可以随时联系我'} ] },
        { id: 2, avatar: 'B', name: '数学老师', group: '老师', subject: '数学作业', messages: [ {from:'ta',text:'请家长督促孩子完成作业'} ] },
        { id: 3, avatar: 'C', name: '李妈妈', group: '家长', subject: '同学家长', messages: [ {from:'ta',text:'您好，我是李明的妈妈，有事可以联系我'} ] }
      ],
      quickPhrases: ['谢谢老师', '收到', '好的', '请多关照', '有问题随时联系', '辛苦了'],
    }
  },
  computed: {
    filteredContacts() {
      let arr = this.contacts;
      if (this.groupFilter !== '全部') arr = arr.filter(c => c.group === this.groupFilter);
      if (this.search) arr = arr.filter(c => c.name.includes(this.search) || c.subject.includes(this.search));
      return arr;
    }
  },
  mounted() {
    this.scrollToBottom();
  },
  updated() {
    this.scrollToBottom();
  },
  methods: {
    sendMsg() {
      if (!this.newMsg.trim()) return;
      this.contacts[this.activeContact].messages.push({from:'me',text:this.newMsg});
      this.newMsg = '';
    },
    scrollToBottom() {
      this.$refs.msgBox && (this.$refs.msgBox.scrollTop = this.$refs.msgBox.scrollHeight);
    },
    addContact() {
      if (!this.addForm.name.trim()) return alert('请输入姓名');
      this.contacts.push({
        id: idSeed++,
        avatar: this.addForm.name[0],
        name: this.addForm.name,
        group: this.addForm.group,
        subject: this.addForm.subject,
        messages: []
      });
      this.showAddContact = false;
      this.addForm = { name: '', group: '老师', subject: '' };
    },
    openSetting(contact) {
      this.settingContact = contact;
      this.showSetting = true;
    },
    insertPhrase(phrase) {
      this.newMsg = phrase;
      this.$refs.msgInput && this.$refs.msgInput.focus && this.$refs.msgInput.focus();
    }
  }
}
</script>
<style scoped>
.parent-chat-root { min-height: 100vh; background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%); }
.user-bar {
  display: flex;
  align-items: center;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 18px 32px 12px 32px;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  margin-bottom: 12px;
}
.user-avatar-gradient {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7f9cf5 0%, #63b3ed 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  margin-right: 16px;
  box-shadow: 0 2px 8px rgba(99,179,237,0.15);
}
.user-info { flex: 1; }
.user-name { font-size: 18px; font-weight: 600; color: #333; }
.user-desc { font-size: 13px; color: #888; margin-top: 2px; }
.logout-btn {
  background: linear-gradient(90deg, #f56565 0%, #ed64a6 100%);
  color: #fff;
  border: none;
  border-radius: 18px;
  padding: 8px 22px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
}
.logout-btn:hover { background: linear-gradient(90deg, #c53030 0%, #b83280 100%); }

.nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  background: #fff;
  border-radius: 12px;
  margin: 0 auto 18px auto;
  max-width: 900px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  padding: 10px 0;
}
.nav a {
  color: #4c51bf;
  font-weight: 500;
  font-size: 16px;
  padding: 6px 18px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
.nav a:hover, .nav-active {
  background: #e6f4ff;
  color: #2563eb !important;
}

.chat-card { display: flex; max-width: 900px; margin: 0 auto; background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.10); overflow: hidden; }
.sidebar { width: 240px; background: #f5f7fa; border-right: 1px solid #eee; display: flex; flex-direction: column; }
.sidebar-title { font-weight: bold; padding: 16px; border-bottom: 1px solid #eee; background: #f9f9f9; display: flex; align-items: center; justify-content: space-between; }
.add-btn { background: #2563eb; color: #fff; border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 20px; cursor: pointer; }
.add-btn:hover { background: #1e40af; }
.group-filter { padding: 10px 16px; border-bottom: 1px solid #eee; }
.group-tag { display: inline-block; background: #e6f4ff; color: #2563eb; border-radius: 12px; padding: 2px 12px; margin-right: 8px; font-size: 13px; cursor: pointer; margin-bottom: 4px; transition: background 0.2s, color 0.2s; }
.group-tag.active { background: #2563eb; color: #fff; }
.contacts { flex: 1; overflow-y: auto; }
.contact-item { display: flex; align-items: center; padding: 16px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background 0.2s, box-shadow 0.2s; position: relative; border-radius: 8px; margin: 4px 8px; }
.contact-item.active, .contact-item:hover { background: #e6f4ff; box-shadow: 0 2px 8px rgba(99,179,237,0.08); }
.contact-avatar-gradient { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #7f9cf5 0%, #63b3ed 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 12px; font-weight: bold; box-shadow: 0 2px 8px rgba(99,179,237,0.10); }
.contact-info { flex: 1; min-width: 0; }
.contact-name { font-size: 16px; font-weight: 500; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-subject { font-size: 13px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-group { font-size: 12px; color: #999; margin-top: 2px; }
.setting-btn { background: none; border: none; color: #888; font-size: 16px; cursor: pointer; margin-left: 6px; }
.setting-btn:hover { color: #2563eb; }

.chat-area { flex: 1; display: flex; flex-direction: column; }
.chat-header { padding: 16px; border-bottom: 1px solid #eee; font-weight: bold; background: #f9f9f9; font-size: 17px; color: #2563eb; letter-spacing: 1px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 24px; background: #f8f9fa; display: flex; flex-direction: column; }
.chat-bubble { display: inline-block; margin: 8px 0; padding: 12px 22px; border-radius: 22px; max-width: 70%; word-break: break-all; box-shadow: 0 2px 8px rgba(99,179,237,0.10); font-size: 15px; animation: fadeIn 0.3s; }
.chat-bubble.me { background: linear-gradient(90deg, #e0e7ff 0%, #c7d2fe 100%); align-self: flex-end; margin-left: auto; color: #2563eb; }
.chat-bubble.ta { background: #f1f1f1; align-self: flex-start; margin-right: auto; color: #333; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: none; } }
.chat-input-area { display: flex; padding: 16px; border-top: 1px solid #eee; background: #fff; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.chat-input-area input { flex: 1; padding: 12px 18px; border: 1.5px solid #c7d2fe; border-radius: 22px; margin-right: 10px; font-size: 15px; transition: border 0.2s; }
.chat-input-area input:focus { border: 1.5px solid #2563eb; outline: none; }
.chat-input-area button { background: linear-gradient(90deg, #2563eb 0%, #63b3ed 100%); color: #fff; border: none; border-radius: 22px; padding: 10px 28px; cursor: pointer; font-size: 15px; transition: background 0.2s; }
.chat-input-area button:hover { background: linear-gradient(90deg, #1e40af 0%, #3182ce 100%); }

.quick-phrases {
  display: flex;
  gap: 12px;
  padding: 10px 18px 18px 18px;
  background: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0 2px 8px rgba(99,179,237,0.04);
  margin-top: -8px;
}
.phrase-btn {
  background: linear-gradient(90deg, #e0e7ff 0%, #c7d2fe 100%);
  color: #2563eb;
  border-radius: 16px;
  padding: 6px 18px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  border: none;
  outline: none;
  user-select: none;
}
.phrase-btn:hover {
  background: linear-gradient(90deg, #2563eb 0%, #63b3ed 100%);
  color: #fff;
}

.modal-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.2); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-box { background: #fff; border-radius: 12px; padding: 30px 24px; min-width: 320px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; color: #333; }
.form-group input, .form-group select { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; }

@media (max-width: 1000px) {
  .chat-card, .nav { max-width: 100vw; }
  .chat-card { border-radius: 0; }
}
@media (max-width: 700px) {
  .chat-card { flex-direction: column; }
  .sidebar { width: 100%; border-right: none; border-bottom: 1px solid #eee; }
  .chat-area { min-height: 300px; }
  .user-bar { flex-direction: column; align-items: flex-start; padding: 16px; }
}
</style> 